import CodeView from "../../../shared/components/CodeView";
import { getDisplayElementById } from "../../shared/helpers";
import { MobileNotice, MobileBlurb } from '../../shared/doc-text';
import * as MapExamples from "./base/example";

<div className="lead doc">A map component is used to find a location</div>

## Base

<CodeView>{getDisplayElementById(MapExamples.default)}</CodeView>

### Mobile

<MobileBlurb patternSpecificText="maps will have increased header text size along with other small adjustments" />

<CodeView frameOnly frameTitle="Example mobile styles for maps">
  {getDisplayElementById(MapExamples.default)}
</CodeView>

## States

### First Coordinate Selected

<CodeView>
  {getDisplayElementById(
    MapExamples.states,
    "multiple-coordinates-item-one-selection"
  )}
</CodeView>

### Second Coordinate Selected

<CodeView>
  {getDisplayElementById(
    MapExamples.states,
    "multiple-coordinates-item-two-selection"
  )}
</CodeView>

## Examples

### In Modal - Single Coordinate With Footer

<CodeView isViewport demoStyles="height: 660px;">
  {getDisplayElementById(MapExamples.examples, "single-coordinate")}
</CodeView>

### In Modal - Multiple Coordinates With Footer

<CodeView isViewport demoStyles="height: 660px;">
  {getDisplayElementById(MapExamples.examples, "multiple-coordinates")}
</CodeView>
